<template>
    <div id="retreatTpl">
        <el-dialog
        :visible.sync="dialogVisible"
        top="12vh"
        id="retreatTpl-dialog"
        :close-on-click-modal="false"
        :before-close="handleClose">
            <span slot="title">
                {{listType == 'list' ? (type == 'check' ? '查看退库单' : '编辑退库单') : '审批退库单'}}
            </span>
            <div class="retreatTpl_box mg-10">
                <el-form v-model="formData" label-width="80px" label-position="left" style="padding: 10px;margin: 5px 0; background: #fff1f1; border-radius: 4px">
                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content">
                                <el-form-item label="出库仓:">
                                    <span>
                                        {{scopeData.senderStore}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-form-item label="出库单号:">
                                    <span>
                                        {{scopeData.stockOutOrderId}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-form-item label="出库时间:">
                                    <span>
                                        {{scopeData.gmtStockout}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content">
                                <el-form-item label="发货数量:">
                                    <span>
                                        {{scopeData.totalGoodsOut}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content">
                                <el-form-item label="操作状态:">
                                    <span>
                                        {{scopeData.isCompleted == 1 ? '已完成' : '未完成'}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content">
                                <el-form-item label="操作人:">
                                    <span>
                                        {{scopeData.createUser}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content">
                                <el-form-item label="入库仓:">
                                    <span>
                                        {{scopeData.receiverStore}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-form-item label="入库单号:">
                                    <span>
                                        {{scopeData.stockInOrderId}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-form-item label="入库时间:">
                                    <span>
                                        {{scopeData.gmtStockin}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content">
                                <el-form-item label="实收数量:">
                                    <span>
                                        {{scopeData.totalGoodsIn}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content">
                                <el-form-item label="审批状态:">
                                    <span>
                                        {{scopeData.approveStatus ? (scopeData.approveStatus == 0 ? '待提交' : scopeData.approveStatus == 1 ? '待审批' : scopeData.approveStatus == 2 ? '已同意' : scopeData.approveStatus == -1 ? '已拒绝' : '-') : '-'}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content">
                                <el-form-item label="审批人:">
                                    <span>
                                        {{scopeData.approveUser}}
                                    </span>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="mg-10">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="少入商品" name="first">
                        <el-row :gutter="5"  v-if="show">
                            <el-col :span="8"  v-if="type == 'edit'">
                                <div class="grid-content">
                                    <retreatCard :editType="1" :activeName="activeName" :type="type" :scopeData="scopeData" :treeData="stockOnData" :listType="listType"></retreatCard>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content">
                                    <retreatCard :editType="2" :activeName="activeName" :type="type" :scopeData="scopeData" :treeData="stockOutData" :listType="listType"></retreatCard>
                                </div>
                            </el-col>
                             <el-col :span="8">
                                <div class="grid-content">
                                    <retreatCard :editType="3" :activeName="activeName" :type="type" :scopeData="scopeData" :treeData="stockInData" :listType="listType"></retreatCard>
                                </div>
                            </el-col>
                        </el-row>
                        
                    </el-tab-pane>
                    <el-tab-pane label="多入商品" name="second">
                        <retreatCard :editType="3" :activeName="activeName" :scopeData="scopeData" :treeData="stockInDataMore"></retreatCard>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer" v-if="listType == 'list' && type =='edit'">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">提 交</el-button>
            </span>
            <span slot="footer" class="dialog-footer" v-if="listType == 'approve' && scopeData.approveStatus === 0">
                <el-button size="small" type="primary" @click="handleSubmitAgree">同 意</el-button>
                <el-button size="small" type="primary" @click="handleSubmitRefuse">拒 绝</el-button>
                <el-button size="small" @click="handleClose">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import retreatCard from './retreatCard'
    export default {
        props: ['type', 'isShow', 'id', 'listType', 'scopeData'],
        components: { retreatCard},
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow
                },
                set() {}
            },
            stockOnData: {
                get() {
                    return this.$store.state.retreatTpl.stockOnData
                },set() {}
            },
            stockOutData: {
                get() {
                    return this.$store.state.retreatTpl.stockOutData
                },set() {}
            },
            stockInData: {
                get() {
                    return this.$store.state.retreatTpl.stockInData
                },set() {}
            },
            stockInDataMore: {
                get() {
                    return this.$store.state.retreatTpl.stockInDataMore
                },set() {}
            },

        },
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem('userInfo')),
                activeName: 'first',
                formData: {},
                treeData: [],
                show: true ,
                listOnSum: 0, 
                listOutSum: 0,
                listInSum: 0     
            }
        },
  
        created() {
            console.log(this.$store.state, '//')
            this.getList()
        },
        methods: {
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            filterLevel3(arr) {
                let newArr= []
                for(let i= 0; i < arr.length; i++) {
                    if(arr[i].children.length > 0) {
                        for(let k=0; k < arr[i].children.length; k++) {
                            if(arr[i].children[k].children.length > 0) {
                                for(let m=0; m < arr[i].children[k].children.length; m++) {
                                    newArr.push(arr[i].children[k].children[m])
                                }
                            }
                        }
                    }
                }
                console.log(newArr, 'new')
                return newArr;
            },
            handleSubmit() {
                this.listOnSum= this.getListSum(this.stockOnData)
                this.listInSum= this.getListSum(this.stockInData)
                this.listOutSum= this.getListSum(this.stockOutData)
                console.log(this.listInSum, 'listInSum')
                console.log(this.stockOnData, 'stockOnData')
                console.log(this.stockOutData, 'stockOutData')
                if(this.listOnSum > 0) {
                    this.$alert('商品尚未分配完')
                }else {
                    let params= {
                        createUser: this.user.personName,
                        createUserId: this.user.userId,
                        receiverReturnList: this.stockInData.length > 0 ? this.filterLevel3(this.stockInData): [],
                        senderReturnList: this.stockOutData.length > 0 ? this.filterLevel3(this.stockOutData): [],
                        stockReturnId: this.id
                    }
                    let datas= [
                        '本次差异入库数量： ' + this.scopeData.totalLess + '件',
                        '归属出库仓（' + this.scopeData.senderStore + '）库存： ' + this.listInSum + '件', 
                        '归属出库仓（' + this.scopeData.receiverStore + '）库存： ' + this.listOutSum + '件', 
                        '请二次确认上述差异入库的分配']
                    let h= this.$createElement;
                    let newDatas= [];
                    for (let i in datas) {
                        newDatas.push(h('p', null, datas[i]));
                    }
                    this.$confirm('提示',{
                        title: '提示',
                        message: h('div', null, newDatas),
                       
                    }).then(_ => {
                        this.$server.stockControlApi.submitRetreatOrder(params).then( res => {
                            this.$emit('cancelShow', false)
                            this.$store.dispatch('changeStockOutData', [])
                            this.$store.dispatch('changeStockOnData', [])
                            this.$store.dispatch('changeStockInData', [])
                            this.$emit('getRetreatList')
                        })
                    }).catch()
                }
            },

            getListSum(arr) {
                let newArr= [], sum=0;
                for(let i=0; i< arr.length; i++) {
                    if(arr[i].children.length > 0) {
                        for(let j=0; j < arr[i].children.length; j++) {
                            if(arr[i].children[j].children.length > 0) {
                                for(let k=0; k <arr[i].children[j].children.length; k++) {
                                    if(arr[i].children[j].children[k].goodsQty > 0) {
                                        newArr.push(arr[i].children[j].children[k])
                                    }
                                }
                            }
                        }
                    }
                }
                console.log(newArr, 'newArr')
                for(let m=0; m< newArr.length; m++) {
                    sum+= newArr[m].goodsQty
                }
                console.log(sum, 'sum')
                return sum;
               
            },
            async getList() {
                await this.$server.stockControlApi.getRetreatDetail(this.id).then(res => {
                    let arr1= res.data.lessList
                    // let arr2= res.data.less2senderList
                    // let arr3= res.data.less2receiverList
                    // let arr4= res.data.more2receiverList
                    // this.getNum(arr1)
                    // console.log(arr1, 'arr1')
                    // this.$store.dispatch('changeStockOnData', this.getNum(arr1))
                    // this.$store.dispatch('changeStockOutData', this.getNum(arr2))
                    // this.$store.dispatch('changeStockInData',  this.getNum(arr3))
                    // this.$store.dispatch('changeStockInDataMore', this.getNum(arr4))
                    this.$store.dispatch('changeStockOnData', res.data.lessList)
                    this.$store.dispatch('changeStockOutData', res.data.less2senderList)
                    this.$store.dispatch('changeStockInData',  res.data.less2receiverList)
                    this.$store.dispatch('changeStockInDataMore', res.data.moreList)
                })
                this.show= true
            },
            /**过滤数量为0的商品 */
            filterGoodsQty() {

            },
            /**审批 */
            handleSubmitAgree() {
                this.$confirm('确定同意？').then(_ => {
                    this.handleSubmitCommon(2)
                }).catch()
            },
            handleSubmitRefuse() {
                this.$confirm('确定拒绝？').then(_ => {
                    this.handleSubmitCommon(-1)
                }).catch()
            },
            handleSubmitCommon(val) {
                let params= {
                    approveUser: this.user.personName,
                    approveUserId: this.user.userId,
                    stockReturnId: this.id,
                    approveStatus: val
                }
                this.$server.stockControlApi.retreatApprove(params).then(res => {
                    this.$emit('cancelShow', false)
                    this.$emit('getRetreatList')
                })
            }
        }
    }
</script>
